<h3>Demo showing path between images sorted in grid reference order</h3>
<?
$views['gridrefsort'] = 'Grid Ref Ordering Demo';
?>

<div style="width:800px">
<div style="float:right;font-size:0.7em">
	<? if ($portal['public'] == 'Y') { ?>
		<b>Single click to load nearby photos.</b>
	<? } ?>
</div>
<?
print "<form class=\"sform\">";
print "<div class=\"d\">";
print "View style<br/>";
print "<select name=\"view\" onchange=\"this.form.submit()\">";
foreach ($views as $key => $value) {
	printf("<option value=\"%s\"%s>%s</option>",$key,($key==$opt['view'])?' selected':'',$value);
}
print "</select></div>";
print "</form>";

?>
<br style="clear:both"/>
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<script type="text/javascript"> 
	var map = null;
	

	function init() {
		var mapCenter = new google.maps.LatLng(54.55,-3.88);
		map = new google.maps.Map(document.getElementById('map'), {
			'zoom': 6,
			'center': mapCenter,
			'mapTypeId': google.maps.MapTypeId.TERRAIN
		});
		
		var routeCoordinates = [
			<?
			$result = queryExecute("SELECT gridimage_id,wgs84_lat,wgs84_long FROM p2.gridimage{$id}_bi_view ORDER BY grid_reference");

			if ($result) {
				$first = true;
				while($c = mysql_fetch_assoc($result)) {
					if (!$first) print ","; $first = false;
					print "new google.maps.LatLng({$c['wgs84_lat']},{$c['wgs84_long']})";
				}
			}
			?>
		];
		var route = new google.maps.Polyline({
			path: routeCoordinates,
			strokeColor: "#FF0000",
			strokeOpacity: 1.0,
			strokeWeight: 3
		});

		route.setMap(map);
		
		var bounds = new google.maps.LatLngBounds; 
		route.getPath().forEach(function(latLng) { 
			bounds.extend(latLng); 
		}); 
		map.fitBounds(bounds);
		
		<? if ($portal['public'] == 'Y') { ?>
		google.maps.event.addListener(map, 'click', function(event) {
			var ll = event.latLng;
			$.get("/images.ajax.php?d=2&lat="+ll.lat()+"&long="+ll.lng(),function (data) {
				$("#photo_container").html(data);
			});

			return true;
		});
		<? } ?>
	}

	// Register an event listener to fire when the page finishes loading.
	google.maps.event.addDomListener(window, 'load', init);
</script> 


	<div id="map" style="width: 800px;height: 700px;"></div> 
	
	
	<div id="photo_container" style="width:800px;"></div>
